<template>
  <div ref="chartRef"
       :style="{ height: '300px', width: '100%' }"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import * as echarts from 'echarts'; // 直接导入 ECharts

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const { getThemeColor } = useRootSetting();

// 模拟数据
const X_DATA = ['2023-01-10', '2023-01-11', '2023-01-12', '2023-01-13', '2023-02-06', '2023-02-08'];
const SERIES_DATA = [
  { name: '数据访问次数', data: [25, 5, 6, 3, 10, 3], color: '#409eff' },
  { name: '访问量数', data: [0, 1, 2, 1, 1, 1], color: '#87e8de' },
];

const initChart = () => {
  setOptions({
    // 添加图例配置
    legend: {
      type: 'scroll', // 启用滚动（数据多时有滚动条）
      orient: 'horizontal', // 水平布局
      top: '5%', // 位置在底部
      data: SERIES_DATA.map((item) => item.name), // 自动从数据中获取名称
      textStyle: {
        color: '#333', // 文字颜色
        fontSize: 12,
      },
      itemWidth: 12, // 图例标记宽度
      itemHeight: 8, // 图例标记高度
      pageButtonItemGap: 5, // 翻页按钮间距
      pageButtonColor: '#999', // 翻页按钮颜色
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: { lineStyle: { color: getThemeColor.value } },
    },
    xAxis: {
      type: 'category',
      data: X_DATA,
      boundaryGap: false,
      axisTick: { show: false },
      splitLine: { show: true, color: 'rgba(226,226,226,0.5)' },
    },
    yAxis: {
      type: 'value',
      name: '次数(次)',
      axisTick: { show: false },
      splitArea: {
        show: true,
        areaStyle: { color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'] },
      },
    },
    series: SERIES_DATA.map((item) => ({
      name: item.name,
      type: 'line',
      data: item.data,
      smooth: true,
      itemStyle: { color: item.color },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: `${item.color}80` },
          { offset: 1, color: `${item.color}00` },
        ]),
      },
      // 确保图例点击时可以控制显示/隐藏
      showSymbol: false, // 不显示拐点标记，使图表更简洁
      emphasis: {
        focus: 'series', // 高亮整个系列
      },
    })),
  });
};

watchEffect(initChart);
onMounted(initChart);
</script>